<template>
	<view>
		<view class="warps " v-if="isWarp" @click="setWarpMen()">
			<view class="warp_position animation-slide-bottom">
				<scroll-view scroll-y="true" @click.stop>
					<view class="title" :class="{title_active:index == activeNum}" @click.stop="activeNum = index"
						v-for="(item,index) in array" :key='index'>{{item.name?item.name:item.title}}</view>
				</scroll-view>
				<view class="rowsc ">
					<view class="warp_submit submit_position" @click.stop="submit()">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pop-option",
		props: {
			array: Array
		},
		data() {
			return {
				isWarp: false,
				activeNum: '9999', //默认0
				quartersData: '', //招聘id
			};
		},
		watch: {
			activeNum(event) {
				this.quartersData = this.array[event]
				// console.log('[watch]',this.quartersData);
			}
		},
		methods: {
			/**
			 * 设置弹窗是否展示
			 */
			setWarpMen() {
				this.isWarp = !this.isWarp
			},
			submit() {
				if (this.activeNum == 9999) {
					this.$tools.showToast('请先选择')
					return false
				}
				this.$emit('submit', this.quartersData)
				this.setWarpMen()
				if (this.quartersData) {
					setTimeout(r => {
						this.activeNum = 9999
					}, 100)
				}
			}
		}

	}
</script>

<style lang="scss">
	.warps {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 99;

		.warp_position {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 750rpx;
			height: 610rpx;
			background: #FFFFFF;
			border-radius: 26rpx 26rpx 0px 0px;
		}

		.warp_submit {
			margin-top: 30rpx;
			width: 658rpx;
			height: 90rpx;
			background: #43D1BE;
			opacity: 1;
			border-radius: 45rpx;
			left: 90rpx;
			text-align: center;
			color: white;
			line-height: 90rpx;
		}

		scroll-view {
			height: 450rpx;

			.title {
				padding: 30rpx;
				border-bottom: 1rpx solid #EEEEEE;
				text-align: center;
			}

			.title_active {
				background-color: #43D1BE;
				color: white;

			}
		}
	}
</style>
